<template>
  <div>
    <!-- 模糊查询   表单   根据字段查询   -->
    <el-form :inline="true" :model="course" ref="course" class="demo-form-inline">
      <el-form-item label="课程名称" prop="title">
        <el-input v-model="course.title" placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item label="是否免费" prop="courseOriginal">
        <el-select v-model="course.courseOriginal" placeholder="是否免费">
          <el-option label="免费" value="0"></el-option>
          <el-option label="收费" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary"  @click="resetForm('course')">重置</el-button>
      </el-form-item>
    </el-form>

    <!--  table表格 数据展示 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="cid"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="cover"
        label="课程封面">
        <template slot-scope="scope">
          <img :src="scope.row.cover" alt="" width="100px" />
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="课程名称">
      </el-table-column>
      <el-table-column
        v-if="false"
        prop="isFree"
        label="是否收费">
      </el-table-column>
      <!--<el-table-column-->
        <!--v-if="false"-->
        <!--prop="inid"-->
        <!--label="简绍">-->
      <!--</el-table-column>-->
      <el-table-column
        prop="futitle"
        label="课程分类">
      </el-table-column>
      <el-table-column
        width="110px"
        prop="original"
        label="价格">
      </el-table-column>
      <!--<el-table-column-->
        <!--prop="csort"-->
        <!--label="排序">-->
      <!--</el-table-column>-->
      <el-table-column
        prop="审核状态"
        label="审核状态">未审核
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)" type="success" round>审核</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!--  table 表格的分页    -->
    <div class="block" align="center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.current"
        :page-sizes="pageSizes"
        :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </div>
    <!-- 审核信息的会话层   -->
    <el-dialog
      :title=cname
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose">
      <!--form  表单      -->
      <el-form  :model="ruleForm" status-icon  ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <!--  单选框        -->
        <el-form-item label="审核状态:" prop="pass">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:" prop="pass">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="ruleForm.remark">
          </el-input>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="submitForm" >提交</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
  import qs from  'qs'
    export default {
        name: "check",
      methods: {
        /*table  表格*/
        tableRowClassName({row, rowIndex}) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
        },
        /*模糊查询form 表单的提交事件*/
        onSubmit() {
          /*重新刷新页面  调用查询方法*/
          this.queryAll();
        },
        /*重置事件的方法*/
        resetForm(formName) {
          this.$refs[formName].resetFields();
          /*清空模糊查询的数组  再次调用查询方法*/
          this.queryAll();
        },
        //禁用按钮
        handleChangeStatus(obj,statusId){
          const title = { 1: '禁用', 0: '启用' }
          this.$confirm(`确定要${title[statusId]}吗?`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.tableData.statusId=obj.statusId
          }).catch(() => {
            obj.statusId=(statusId+1)%2
          })
        }
        ,
        /* 分页  换页事件的  方法  */
        handleSizeChange(val) {
          this.pageInfo.size = `${val}`;
          this.pageInfo.records = {};
          console.log(`每页 ${val} 条`);
          /* 数据表格查询方法 */
          this.queryAll();
          // alert(JSON.stringify(this.pageInfo))
        },
        handleCurrentChange(val) {
          this.pageInfo.current = `${val}`;
          this.pageInfo.records = {};
          /* 数据表格查询方法 */
          this.queryAll();
          // console.log(`当前页: ${val}`);
          // alert(JSON.stringify(this.pageInfo))
        }
        /*table   审核按钮   信息 的 审核   事件方法*/
        ,
        handleEdit(index,row){
          /* 修改信息的会话层   form 表单  */
          this.dialogVisible = true;
          /*把table一行的值赋给ruleForm*/
          this.ruleForm.cid=row.cid;
          /*把课程的id赋值给   ruleForm一个新的值courseId   便于后台添加数据*/
          this.ruleForm.courseId=row.cid;
        }
        /*form表单   X号关闭的方法事件*/
        ,
        handleClose(done) {
          this.$confirm('你确定关闭弹窗吗?')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        /*form计数器事件*/
        handleChange(value) {
          console.log(value);
        }
        /*form   文本编辑器*/
        ,onEditorReady(editor) {
        },
        /*查询所有   模糊查询*/
        queryAll(){

          //将模糊查询的值 赋值给pageinfo
          this.pageInfo.title=this.course.title;
          this.pageInfo.courseOriginal=this.course.courseOriginal;

          this.$axios.post("/course/edu-course/queryAll",qs.stringify(this.pageInfo)).then(res=>{
            /*查询出来的数据赋值给tableData*/
            this.tableData=res.data.records;
            /*把查询值的条数赋值给pageInfo.total*/
            this.pageInfo.total=res.data.total;
          })
        },
        /*修改form的提交按钮*/
        submitForm(){
          this.$axios.post("/course/course-audit/audit",qs.stringify(this.ruleForm)).then(res=>{
            // alert(JSON.stringify(res.data));
            if (res.data===true){
              this.dialogVisible=false;
              this.queryAll();
            }else {
              alert("报错！！！！！！");
            }
          })

        }
      }
      ,
      /*页面刷新执行*/
      created() {
        this.queryAll();
      }
      ,
      data() {
        return {
          /*table表格数据*/
          tableData:  [],
          /*分页 的 数 据*/
          pageSizes: [2, 4],
          pageInfo: {current: 1, size: 2, status:0, total: 10},
          /*模糊查询的值*/
          course:{
            title:'',
            courseOriginal:''},
          /* 修改信息的会话层   form 表单  */
          dialogVisible : false
          ,
          /*form表单的数据*/
          ruleForm: {
            cid:'',
            status:'',
            remark:''
          },
          cname:''
        }
      }
    }
</script>

<style scoped>

</style>
